//主布局界面左侧菜单子节点

import React from 'react';
import "./index.css";
import UpSVG from "../../../Common/svg/Up";
import UserSVG from "../../../Common/svg/User";
import MarketSVG from "../../../Common/svg/Market";
import Blank from '../../Blank';
import "../../../Common/css/common.css";
import ChangjingSVG from '../../../Common/svg/Changjing';
import SwitchSvgByKey from '../../../Common/svg/SwitchSvgByKey';
import Aircraft from '../../../Common/svg/Aircraft';

export default class LeftMenuItem extends React.Component{
    constructor (props){
        super();
        this.state={
            data:props.data,
            selectColor:"#333",
            id:props.id,
            generate:props.generate,
            selectIndex:props.selectIndex
            // ChangeHeight:props.change
        }
        if(props.selectIndex!==undefined){
            this.state.data.defaultSelectIndex=props.selectIndex;
        }
    }
    UNSAFE_componentWillReceiveProps(props){
        this.setState({
            data:props.data,
            id:props.id,
            generate:props.generate,
            selectIndex:props.selectIndex
        })
        if(props.selectIndex!==undefined){
            this.state.data.defaultSelectIndex=props.selectIndex;
        }
    }
    selectMneu(id){
        let selectClassName=" Layout_LeftMenu_SubItem_Selected";
        let data=document.getElementsByClassName("Layout_LeftMenu_SubItem_Selected");
        //移除其他元素样式
        for(let i=0;i<data.length;i++){
            let className=data[i].className;
            className=className.replace(selectClassName,"");
            data[i].className=className;
        }
        //添加选中的元素样式
        let currentNode=document.getElementById(id);
        document.title=currentNode.getAttribute("data-title");

        currentNode.className+=selectClassName;
        this.setState({
            selectColor:"#5393EB"
        },()=>{
            this.state.generate(this.state.id);
        });

        // //设置svg样式
        // let svgs=document.getElementsByClassName("Layout_LeftMenu_SubItem_SVG");
        // //移除其他元素样式
        // for(let i=0;i<svgs.length;i++){
        //     let svgClassName=svgs[i].className;
        //     svgClassName=svgClassName.replace("Layout_LeftMenu_SubItem_SVG","");
        //     svgs[i].className=svgClassName;
        // }
        // let svg=document.getElementById(id+"_svg");
        // svg.setAttribute("fill","red");
    }
    
    render(){
        let menu=[];
        let index=0;
        for(let i=0;i<this.state.data.menu.length;i++){
            let id=this.state.id+"_"+i+"_menu";
            let svg=<SwitchSvgByKey id={id+"_svg"} svg={this.state.data.menu[i][2]} color={this.state.selectColor} />;
            //默认显示的页面
            if(this.state.data.defaultSelectIndex!==-1 && i===this.state.data.defaultSelectIndex){
            // if(this.state.data.defaultSelectIndex!==-1 && i===1){
                menu.push(
                    <div id={id} data-title={this.state.data.menu[i][0]} key={index++} className="LeftMenu_Item Layout_LeftMenu_SubItem_Selected">
                        <a target="Layout_MainContainer" href={this.state.data.menu[i][1]!==""?this.state.data.menu[i][1]:"javascript:void(0);"}  onClick={e=>this.selectMneu(id)}>
                            {svg}{this.state.data.menu[i][0]}
                        </a>
                    </div>
                );
            }
            else{
                menu.push(
                    <div id={id}  data-title={this.state.data.menu[i][0]}  key={index++} className="LeftMenu_Item">
                        <a target="Layout_MainContainer" href={this.state.data.menu[i][1]!==""?this.state.data.menu[i][1]:"javascript:void(0);"}  onClick={e=>this.selectMneu(id)}>
                            {svg}{this.state.data.menu[i][0]}
                        </a>
                    </div>
                );
            }
        }
        let ico="";

        switch(this.state.data.svg){
            case "user":
                ico=<UserSVG id={this.state.id+"_svg"}/>;
                break;
            case "market":
                ico=<MarketSVG  id={this.state.id+"_svg"}/>;
                break;
            case "changjing":
                ico=<ChangjingSVG  id={this.state.id+"_svg"}/>;
                break;
            case "aircraft":
                ico=<Aircraft id={this.state.id+"_svg"}/>;
                break;
            default :
                break;
        }

        ico=(
            <span className="Layout_LeftMenu_Ico ">
                {ico}
            </span>
        );

        let titie="";
        if(this.state.data.name!==""){
            titie=(
                <div className="flexContainer">
                    {ico}
                    <span id={this.state.id} className="LeftMenu_Item_Title">
                        {this.state.data.name}
                    </span>
                    <Blank/>
                    <UpSVG/>
                </div>
            )
        }
        else{
            titie=(
                <div className="flexContainer">
                    <span id={this.state.id} className="LeftMenu_Item_Title">
                        {this.state.data.name}
                    </span>
                </div>
            )
        }

        return(
            <div className="Layout_LeftMenu_SubItem">
                {titie}
                {menu}
            </div>
        );
    }
}
